<template>
  <div class="main-box">
    <div class="header-box">
      <div class="header-title">
        <span> 问卷调查管理系统</span>
        <div class="user">
          <div>
            <el-icon size="25"><user-filled /></el-icon>
            <span>{{
              $store.state.userInfo && $store.state.userInfo.name
            }}</span>
          </div>
          <div>
            <el-button
              type="warning"
              size="mini"
              circle
              :icon="SwitchButton"
              @click="logout"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-box">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#4a5e71"
        class="el-menu-vertical-demo"
        text-color="#fff"
        router
        default-active="/"
        style="height: 100%"
      >
        <el-menu-item index="/">
          <el-icon><question-filled /></el-icon>
          <span>问卷调查</span>
        </el-menu-item>
        <el-menu-item
          index="/list"
          v-show="
            $store.state.userInfo.role &&
            $store.state.userInfo.role.includes('List')
          "
        >
          <el-icon><list /></el-icon>
          <span>提交记录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content-box">
      <router-view />
    </div>
  </div>
</template>
<script>
import { ElMenu, ElMenuItem, ElIcon, ElButton } from "element-plus";
import {
  QuestionFilled,
  List,
  SwitchButton,
  UserFilled,
} from "@element-plus/icons";
import constants from "../constants";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElIcon,
    ElButton,
    QuestionFilled,
    List,
    SwitchButton,
    UserFilled,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const logout = () => {
      localStorage.removeItem(constants.Token);
      localStorage.removeItem(constants.UserInfo);
      store.commit(constants.SetUserInfo, {});
      router.replace("/login");
    };

    return {
      logout,
      SwitchButton,
    };
  },
};
</script>
<style lang="less">
.main-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  .header-box {
    height: 45px;
    width: 100%;
    background-color: #4a5e71;
    .header-title {
      width: auto;
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      line-height: 45px;
      .user {
        display: flex;
        width: 200px;
        float: right;
        & > div {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
  .menu-box {
    position: absolute;
    width: 200px;
    top: 45px;
    left: 0;
    bottom: 0;
    border-top: 1px solid #b7b7b7;
  }
  .content-box {
    position: absolute;
    left: 200px;
    top: 45px;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    padding: 15px;
  }
}
</style>